

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点光源</title>
</head>
<body>
    <script src="./three.js"></script>
    <script>
        var clipPlane = [
            // 延yoz平面切割
            new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
            new THREE.Plane(new THREE.Vector3(0, 0, -1), 0),
        ];
        var scene = null;
        var camera = null;
        var renderer = null;
        var sphere = null;
        var light = null;
     
        // 初始化函数
        function init () {
            // 场景
            scene = new THREE.Scene();
            // 相机
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 1000);
            camera.position.z = 100;
            // camera.position.y = -50;
            // camera.position.y = -10;
            // 渲染器
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.localClippingEnabled = true;
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
            // renderer.setClearColor(0xffffff);
            document.body.appendChild(renderer.domElement);
            // 创建几何体
            sphere = createSphereGeometry(10, 0x00ffff);
            sphere.castShadow = true;
            scene.add(sphere);
            // 添加环境光
            var ambientLight = new THREE.AmbientLight( 0xffffff, 1 ); // soft white light
            scene.add(ambientLight);
            // 添加点光源
            light = new THREE.PointLight(0xffffff, 1, 100 );
            light.position.set( 50, 0, 0 );
            // 给点光源的位置添加几何体
            var lightSphere = createSphereGeometry(1, 0xffffff);
            light.add(lightSphere);
            light.castShadow = true;
            light.shadow.mapSize.width = 1024;  // default
            light.shadow.mapSize.height = 1024; // default
            light.shadow.camera.near = 1;       // default
            light.shadow.camera.far = 1000;      // default
            scene.add( light );
            var plane = new THREE.PlaneBufferGeometry(100, 100);
            var planeMaterial = new THREE.MeshStandardMaterial({
                color: 0xeeeeee,
                side: THREE.DoubleSide,
            });
            var planeMesh = new THREE.Mesh(plane, planeMaterial);
            planeMesh.position.set(0, -20, 0);
            planeMesh.rotation.x = Math.PI / 2;
            planeMesh.receiveShadow = true;
            scene.add(planeMesh);

            animate();
        }
        //    创建球体
        function createSphereGeometry(radius, color) {
            var sphere = new THREE.SphereBufferGeometry(radius, 30, 30);
            var material = new THREE.MeshStandardMaterial({
                color: new THREE.Color(color),
                side: THREE.DoubleSide,
            });
            var sphere = new THREE.Mesh(sphere, material);
            return sphere;
        }
        
        // var sphereGeometry = new THREE.SphereBufferGeometry(10, 30, 30);
        var deg = 30;
        var direction = {
            top: +1,
            bottom: -1,
        };
        var nowDirection = direction.top;
        // 动画效果
        function animate() {
            requestAnimationFrame(animate);
            console.log(deg)
            if (deg == 30) {
                nowDirection = direction.bottom;
            }
            if (deg == -20) {
                nowDirection = direction.top;
            }
            deg += nowDirection;
            // camera.position.z = camera.position.z % 100 + 50;
            // camera.position.x = camera.position.x % 
            // camera.rotation.y += 0.1;
            sphere.rotation.y += 0.1;
            light.position.set(10, deg, 10);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            renderer.render(scene, camera);
        }
        
        init();
    </script>
</body>
</html>